import {
  Calendar,
  Home,
  Inbox,
  Search,
  Settings,
  User2,
  BarChart3,
} from "lucide-react"

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarHeader,
} from "@/components/ui/sidebar"

interface AppSidebarProps {
  onMenuClick?: (view: string) => void
}

// Menu items.
const items = [
  {
    title: "玩家搜索",
    url: "#",
    icon: Search,
    view: "search",
  },
  {
    title: "联赛数据",
    url: "#",
    icon: BarChart3,
    view: "league",
  },
  {
    title: "英雄统计",
    url: "#",
    icon: User2,
    view: "heroes",
  },
  {
    title: "赛程安排",
    url: "#",
    icon: Calendar,
    view: "schedule",
  },
  {
    title: "设置",
    url: "#",
    icon: Settings,
    view: "settings",
  },
]

export function AppSidebar({ onMenuClick }: AppSidebarProps) {
  const handleMenuClick = (view: string) => {
    if (onMenuClick) {
      onMenuClick(view)
    }
  }

  return (
    <Sidebar>
      <SidebarHeader>
        <div className="flex items-center gap-2 px-4 py-2">
          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
            <Home className="h-4 w-4" />
          </div>
          <div className="grid flex-1 text-left text-sm leading-tight">
            <span className="truncate font-semibold">Mary Data</span>
              <span className="truncate text-xs">for Dota2</span>
          </div>
        </div>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Home</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {items.map((item) => (
                <SidebarMenuItem key={item.title}>
                  <SidebarMenuButton asChild>
                    <button 
                      onClick={() => handleMenuClick(item.view)}
                      className="w-full flex items-center gap-2 px-2 py-1.5 text-left"
                    >
                      <item.icon />
                      <span>{item.title}</span>
                    </button>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  )
}